<template>
  <van-list
    class="video-list"
    v-model:loading="loading"
    v-bind:error="loadingError"
    :finished="finished"
    :immediate-check="false"
    finished-text="没有更多了"
    error-text="加载失败"
    offset="120"
    @load="handleOnLoad"
  >
    <div class="video-list__item" v-for="(item, index) in list" :key="item.id">
      <div class="video-list__player" :id="item.id">
        <img v-lazy="item.cover" alt="" />
      </div>
      <div class="video-list__content" @click="handleItemClick(item.id, index)">
        <p>{{ item.name }}</p>
        <p>
          <span>{{ item.artistName }}</span>
          <span></span>
        </p>
      </div>
    </div>
  </van-list>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import DPlayer from 'dplayer';
import { useMyStores } from '@/store';
import { getTopMv, getMvUrl } from '@/api/wangyi/video';

// 加载首屏数据
onMounted(() => {
  _getTopMv();
});

const { playerStore, audioPlayState } = useMyStores();

/**
 * 渲染数据相关
 */
const list = reactive([]);
const loading = ref(false);
const finished = ref(false);
const loadingError = ref(false);
const limit = ref(10);
const offset = ref(0);
const hasMore = ref(true);

/**
 * dplayer相关
 */
let dplayer = ref();
let dplayerId = ref();

const handleItemClick = (id, index) => {
  dplayerId.value = id;
  // dplayerIndex.value = index;
  // 暂停音乐播放
  if (audioPlayState.value) {
    playerStore.SET_AUDIO_PLAY_STATE(false);
  }
  // 获取mv地址，进行播放
  getMvUrl(id).then(res => {
    dplayer.value = new DPlayer({
      container: document.getElementById(id),
      autoplay: true,
      video: {
        url: res.data.url
      }
    });
  });
};

const _getTopMv = () => {
  getTopMv({ limit: limit.value, offset: offset.value * limit.value })
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        res.data.forEach(item => {
          list.push(item);
        });
        hasMore.value = res.hasMore;
      }
      loading.value = false;
    })
    .catch(err => {
      loadingError.value = true;
    });
};

const handleOnLoad = () => {
  console.log('触底了。。。');
  if (hasMore.value) {
    offset.value++;
    _getTopMv();
  } else {
    loading.value = false;
    finished.value = true;
  }
};
</script>

<style lang="less" scoped>
.video-list {
  padding: 0 7.5px;
  .video-list__item {
    border-radius: 10px;
    background-color: #eee;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    video {
      width: 100%;
    }
    .video-list__player {
      width: 100%;
      height: 189px;
      img {
        width: 100%;
        height: 100%;
      }
      .dplayer-comment-box,
      .dplayer-icons-left,
      .dplayer-icons-right {
        display: none;
      }
    }
    .video-list__content {
      padding: 10px 8px;
      // p {
      //   color: rgb(255, 255, 255);
      // }
      p:first-child {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 1px;
        padding-bottom: 5px;
      }
      p:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        opacity: 0.9;
      }
    }
  }
}
</style>
